page-contcats {
  // 头部
  .contcats-header
  {
    @include office-header-style();

    .toolbar-background
    {
      @include office-background();
    }
  }

  // 内容
  .contcats-section
  {
    // 内容页面
    .scroll-content
    {
      background-color: $office-page-background;

      ::-webkit-scrollbar {
        width: 0
      }

      $modal-size: 20vw;
      // 侧边栏
      .indexed-menu
      {
        width:6%;
        position: fixed;
        right: 0;
        display: flex;
        justify-content:center;
        flex-direction: column;
        text-align: center;
        background-color: rgba(245, 245, 245, 0.3);
        height: 100%;
        z-index: 1000;
        -webkit-touch-callout: none;
        >div
        {
          -webkit-box-flex: 0;
          -webkit-flex: 0;
          -ms-flex: 0;
          flex: 0;
          margin: px2rem(3) 0;
          color: $office-light-black-nine;
          font-size: px2rem(22);
          @include office-transition(all, .7);

          &.activated
          {
            color: $office-light-black-three;
            font-weight: 600;
            @include office-scale(1.3);
          }
        }
      }

      // 头部
      ion-item-divider
      {
        padding-left: px2rem(32);

        ion-label{
          font-size: px2rem(32);
          margin: px2rem(22) px2rem(16) px2rem(22) 0;
        }
      }

      // 联系人条目
      ion-item
      {
        .item-inner{
          border-bottom: 1px solid $office-page-background;
        }
        ion-label{
          font-size: px2rem(26);
          margin: px2rem(22) px2rem(16) px2rem(22) 0;
        }
      }

      // 模态框
      .modal {

        top: 50%;
        left: 50%;
        z-index: 100;
        position: fixed;

        pointer-events: none;

        width: $modal-size;
        height: $modal-size;
        line-height: $modal-size;
        margin-left: -($modal-size * 0.5);
        margin-top: -($modal-size * 0.5);

        color: #fff;
        font-size: 3em;
        text-align: center;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.52);
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.16);

        transition: opacity .5s;
        opacity: 0;

        &.show {
          opacity: 1
        }

      }
    }
  }
}

